<template>
  <div class="audio-wrap">
    <audio
      :src="musicUrl"
      controls
      autoplay
      ref="audio"
      style="display: none"
      @canplay="getDuration"
      @timeupdate="updateTime"
      @ended="onEnded"
      您的浏览器不支持audio标签
    ></audio>
    <div class="audio-left">
      <div class="audio-btns">
        <span class="iconfont icon-shangyishou" title="上一首" @click="prev"></span>
        <span
          class="iconfont icon-play"
          title="播放"
          v-if="!isPaused"
          @click="changeStatus('play')"
        ></span>
        <span
          class="iconfont icon-pause"
          title="暂停"
          v-if="isPaused"
          @click="changeStatus('pause')"
        ></span>
        <span class="iconfont icon-xiayishou" title="下一首" @click="next"></span>
      </div>

      <div class="audio-progress">
        <span>{{ currentTime | timeFormat }}</span>
        <div class="block">
          <el-slider
            v-model="currentTime"
            :max="duration"
            :show-tooltip="false"
            @change="changeCurrentTime"
            @mousedown.native="isDrag = true"
            @mouseup.native="isDrag = false"
          ></el-slider>
        </div>
        <span>{{ duration | timeFormat }}</span>
      </div>
    </div>

    <div class="audio-right">
      <div class="slot"></div>
      <div class="audio-voice">
        <span class="iconfont icon-yinliang" v-if="voice" @click="voice = 0"></span>
        <span
          class="iconfont icon-jingyin"
          v-if="!voice"
          @click="voice = cacheVoice == 0 ? 0.7 : cacheVoice"
        ></span>
        <div class="block">
          <el-slider
            v-model="voice"
            :max="1"
            :step="0.1"
            :show-tooltip="true"
            @input="changeVolume"
            @change="changeCacheVolume"
            :format-tooltip="formatTooltip"
          ></el-slider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      duration: 0,
      isPaused: false,
      isDrag: false, //添加判断是否拖拽，可解决拖动超过1s出现的bug
      voice: 0.7,
      cacheVoice: 0.7,
    };
  },
  props: {
    musicUrl: String,
  },
  methods: {
    changeStatus(option) {
      if (option == "play") {
        if (this.musicUrl) {
          this.isPaused = !this.isPaused;
          this.$refs.audio.play();
          this.$emit("play");
        } else {
          this.$message({
            type: "error",
            message: "还没有播放音乐哦",
            showClose: true,
          });
        }
      } else {
        this.isPaused = !this.isPaused;
        this.$refs.audio.pause();
        this.$emit("pause");
      }
    },
    changeCurrentTime() {
      // 存在拖动进度条歌词不随着滚动的bug
      this.$refs.audio.currentTime = this.currentTime;
      this.isDrag = false;
      // this.changeStatus(this.isPaused?'play':'pause')
    },
    updateTime(e) {
      // console.log(e.target.currentTime)
      if (!this.isDrag) {
        this.currentTime = e.target.currentTime;
        this.$emit("timeupdate", event);
      }
    },
    getDuration(e) {
      // console.log(e.target.duration)
      this.duration = e.target.duration;

      // 下面两句会导致在暂停时滑动进度条使得按钮状态改变，图片旋转而不播放的bug
      // this.isPaused = true
      // this.$emit('play')
    },
    changeVolume() {
      this.$refs.audio.volume = this.voice;
    },
    changeCacheVolume() {
      // 设置缓存音量,点击静音恢复至该音量，如缓存也为0，恢复默认0.7
      this.cacheVoice = this.voice;
    },
    formatTooltip(val) {
      return val * 100 + "%";
    },
    onEnded() {
      // this.isPaused = false
      // this.$emit('pause')
      this.$emit("end");
    },
    next() {
      this.$emit("next");
    },
    prev() {
      this.$emit("prev");
    },
  },
  filters: {
    timeFormat(time) {
      let min = parseInt(time / 60)
        .toString()
        .padStart(2, "0");
      let second = parseInt(time - min * 60)
        .toString()
        .padStart(2, "0");
      return min + ":" + second;
    },
  },
  watch: {
    voice() {
      if (!this.voice) {
        this.$refs.audio.muted = true;
      } else this.$refs.audio.muted = false;
    },
    musicUrl() {
      if (this.musicUrl) this.isPaused = true;
      else {
        this.isPaused = false;
        this.duration = 0;
        this.$refs.audio.currentTime = 0;
        this.currentTime = 0;
      }
    },
  },
};
</script>

<style>
.audio-wrap {
  width: 600px;
  min-width: 400px;
  height: 100%;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
}

.audio-left {
  flex: 1;
}

.audio-btns {
  width: 50%;
  height: 50%;
  margin: 0 auto;
  display: flex;
  color: white;
  text-shadow: 1px 1px #0000004f;
  justify-content: space-evenly;
  align-items: center;
}

.audio-btns span {
  cursor: pointer;
  font-size: 26px;
  padding: 5px;
  border-radius: 10px;
}

.audio-btns span:hover {
  background-color: #ecf0f1;
}

.audio-progress {
  display: flex;
  align-items: center;
}

.audio-progress span {
  font-size: 12px;
  color: #bdc3c7;
}

.block {
  flex: 1;
  margin: 0 10px;
}

.el-slider__bar {
  background-color: #f15dc4 !important;
}

.el-slider__button {
  border-color: #f15dc4 !important;
  width: 8px !important;
  height: 8px !important;
}

.audio-right {
  width: 20%;
  min-width: 100px;
  margin-left: 50px;
}

.slot {
  height: 50%;
}

.audio-voice {
  display: flex;
  align-items: center;
}

.audio-voice span {
  cursor: pointer;
  margin-right: 10px; /* 远离音量条，防止误触 */
}
</style>
